<template>
    <div class="major-box">
        <div class="search-row">
            <div class="search-item">
                <el-input v-model="searchParams.majorName" placeholder="请输入专业名称"></el-input>
            </div>
            <div class="search-actions">
                <el-button type="primary" @click="listPage()">
                    <el-icon>
                        <Search />
                    </el-icon>查询
                </el-button>
                <el-button @click="reset()">
                    <el-icon>
                        <RefreshLeft />
                    </el-icon>重置
                </el-button>
            </div>
        </div>
        <div class="table-area">
            <div class="add-major" @click="showAddMajor">
                <img src="@/assets/add-point.png" alt="">
                <span>新建专业</span>
            </div>
            <el-table ref="multipleTableRef" :data="questions" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column prop="majorName" label="专业名称" align="center">
                    <template #default="scope">
                        <el-tooltip class="box-item" effect="dark" :content="scope.row.majorName" placement="top-start">
                            <div class="text">{{ scope.row.majorName }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="trainingConditionsDTOList" label="培养条件" align="center">
                    <template #default="scope">
                        <div v-for="(item, index) in scope.row.trainingConditionsDTOList" :key="index">
                            <span class="node">{{ item.node }}</span>
                            <span class="desc">- {{ item.desc }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="abilityRequirementsDTOList" label="能力要求" align="center" >
                    <template #default="scope">
                        <div v-for="(item, index) in scope.row.abilityRequirementsDTOList" :key="index">
                            <span class="node">{{ item.node }}</span>
                            <span class="desc">- {{ getNodeByDesc(item.desc,scope.row.trainingConditionsDTOList) }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="targetPositionsDTOList" label="目标岗位" align="center" >
                    <template #default="scope">
                        <div v-for="(item, index) in scope.row.targetPositionsDTOList" :key="index">
                            <span class="node">{{ item.positions }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="courseConstruction" label="课程建设" align="center" />
                <el-table-column prop="cognitionCourses" label="行业认知课" align="center" />
                <el-table-column prop="coreCourses" label="专业核心课" align="center" />
                <el-table-column prop="extCourses" label="专业拓展课" align="center" />
                <el-table-column prop="basicCourses" label="专业基础课" align="center" />
                <el-table-column prop="practiceCourses" label="专业实践课" align="center" />
                <el-table-column property="name" label="操作" align="center" width="240" fixed="right">
                    <template #default="scope">
                        <div class="material-operations">
                            <el-link type="primary" @click="buildMajor(scope.row.id)"
                                underline="false"><span>建设专业</span></el-link>
                            <el-link type="primary" @click="showGraph(scope.row)"
                                underline="false"><span>查看图谱</span></el-link>
                            <el-link type="danger" @click="deleteMajor(scope.row.id)" underline="false"><span
                                    class="danger">删除</span></el-link>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pages">
                <el-pagination small background layout="prev, pager, next" :total="questions.length" class="mt-4"
                    v-model:current-page="searchParams.pageNum" @current-change="listPage" />
            </div>
        </div>
    </div>
    <el-dialog v-model="addDialogVisable" title="Tips" width="40%">
        <template #header>
            <div class="my-header">
                <span>新建专业</span>
            </div>
        </template>
        <div class="major-dialog">
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">专业名称</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="addParams.majorName" placeholder="请输入专业名称" />
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">学制</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="addParams.eduLength" placeholder="请完善学制信息" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="items">
                        <div class="text">学位</div>
                        <div class="reds">*</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="addParams.degree" placeholder="请完善学位信息" />
                    </div>
                </div>
            </div>
            <div class="add-form">
                <div class="form-item">
                    <div class="items">
                        <div class="text">专业描述</div>
                    </div>
                    <div class="inputs">
                        <el-input v-model="addParams.description" :rows="5" type="textarea" placeholder="请完善专业描述信息" />
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addMajor()">取消</el-button>
                <el-button type="primary" @click="addMajor()">完成</el-button>
                <el-button type="primary" @click="addMajorAndBuild()">完成并建设专业</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
import { RefreshLeft, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import api from '@/api/index.js'
import { useMajortore } from '@/stores/major.js'
const majorStore = useMajortore()
const addDialogVisable = ref(false);
const emit = defineEmits(['update-show-visable'])
const searchParams = ref({
    majorName: '',
    pageNum: 1,
    pageSize: 10
});
const addParams = ref({
    majorName: '',
    eduLength: '',
    degree: '',
    description: ''
});

const questions = ref([
    {
        title: '国家安全教育大学生读本',
        type: '公开标准教材',
        isbn: '1234567893',
        permission: '完全公开',
        knowledge: '94',
        relationship: '1350',
        status: '生成完成',
    }
]);
const getNodeByDesc = (descValue, trainingConditionsDTOList) => {
  for (const item of trainingConditionsDTOList) {
    if (item.uuid === descValue) {
      return item.node;
    }
  }
  return null; // 未找到返回 null
};
const showAddMajor = () => {
    addDialogVisable.value = !addDialogVisable.value;
    addParams.value = {
        majorName: '',
        eduLength: '',
        degree: '',
        description: ''
    }
}
const addMajor = () => {
    api.major_add(addParams.value).then((res) => {
        if (res.code === -1) {
            ElMessage.error(res.data)
            return
        }
        searchParams.value.pageNum = 1
        listPage()
        addDialogVisable.value = false
    })
}
const addMajorAndBuild = () => {
    api.major_add(addParams.value).then((res) => {
        if (res.code === -1) {
            ElMessage.error(res.data)
            return
        }
        addDialogVisable.value = false

        majorStore.majorId = res.data.id
        emit('update-show-visable', 1);
    })
}
const buildMajor = (id) => {
    majorStore.majorId = id
    emit('update-show-visable', 1);
}
const showGraph = () => {
    emit('update-show-visable', 2);
}
const listPage = async () => {
    questions.value = (await api.major_page(searchParams.value)).list
}
listPage()

const deleteMajor = (id) => {
    api.major_del({ id }).then(() => {
        searchParams.value.pageNum = 1
        listPage()
    })
}

const reset = () => {
    searchParams.value.pageNum = 1
    searchParams.value.majorName = ''
    listPage()
}
</script>
<style scoped>
:deep(.el-input__wrapper) {
    background: #F2F3FA !important;
}

:deep(.el-table__row:nth-child(odd)) {
    background: #ffffff !important;
}

:deep(.el-table__row:nth-child(even)) {
    background: #F5F8FE !important;
}

:deep(.el-table th.el-table__cell) {
    background-color: #D2E3FB;
}

:deep(.el-input) {
    width: 100%;
}

:deep(.dialog-footer span) {
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    font-size: 12px !important;
}

.major-box {
    width: 100%;
    border-radius: 8px;
    height: calc(85vh + 20px);
    background: #fff;
}

.search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    justify-content: space-between;
}

.search-item {
    min-width: 250px;
}

.el-button:hover {
    color: #1465E1 !important;
    border: 1px solid #1465E1;
}

.el-button--primary {
    background: #1465E1 !important;
    border: 1px solid #1465E1;
}

.el-button--primary:hover {
    color: #fff !important;
}

.table-area {
    background: white;
    border-radius: 4px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.table-area .text {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
}

.pages {
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding-top: 30px;
}

.material-operations {
    display: flex;
    justify-content: space-around;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
}

.material-operations span {
    font-size: 12px !important;
}

.material-operations span:hover {
    color: #1465E1;
}

.material-operations .danger:hover {
    color: red;
}

.add-major {
    width: 120px;
    background: #1465E1;
    height: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-bottom: 20px;
    cursor: pointer;
}

.add-major img {
    width: 20px;
    height: 20px;
}

.add-major span {
    margin-left: 5px;
    font-family: 微软雅黑, Microsoft YaHei, SimSun;
    color: #fff;
    font-size: 14px;
}

.my-header {
    text-align: left;
}

.add-form {
    width: calc(100% - 30px);
    margin: 10px auto;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.form-item {
    flex: 1;
}

.add-form .items {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.add-form .items .reds {
    color: red;
}

.add-form .inputs {
    margin-top: 10px;
}
</style>